import { Text, View } from 'native-base';
import React from 'react';
import { CommonStyle } from '../../../../common/commonStyle.ts';
import { TouchableOpacity } from 'react-native';
import { useReactive } from 'ahooks';
import DeteTimePicker from '../../../../component/DeteTimePicker.tsx';

interface IAdditionalFormProps {
  item: IGoodsAdditionalInfo;
  edit?: boolean;
  onChange: (text: string) => void;
}
interface IState {
  pickerShow: boolean;
  currentDate?: { date: string[]; time: string[] };
}
export default function AdditionalFormDateTime({ item, edit, onChange }: IAdditionalFormProps) {
  const state = useReactive<IState>({
    pickerShow: false,
  });
  return (
    <React.Fragment>
      <View flexDirection={'row'} alignItems={'center'} py={4}>
        <View width={'25%'} flexDirection={'row'}>
          {item.requiredFlag && !edit && (
            <Text marginRight={1} color={CommonStyle.price}>
              *
            </Text>
          )}
          <Text marginRight={2} fontSize={12}>
            {item.attrName}
          </Text>
        </View>
        <TouchableOpacity style={{ flex: 1, borderRadius: 4, borderColor: CommonStyle.borderColor, borderBottomWidth: 0.5, paddingBottom: 8 }} onPress={() => (state.pickerShow = true)}>
          <Text> {state.currentDate ? `${state.currentDate.date.toString().replace(/,/g, '-')}  ${state.currentDate.time.toString().replace(/,/g, ':')}` : `请选择${item.attrName}`} </Text>
        </TouchableOpacity>
      </View>
      <DeteTimePicker
        visible={state.pickerShow}
        title={`请选择${item.attrName}`}
        currentDate={state.currentDate}
        closeOnClickOverlay={true}
        onCancel={() => (state.pickerShow = false)}
        onConfirm={(date) => {
          state.currentDate = date;
          state.pickerShow = false;
          onChange(`${date.date.toString().replace(/,/g, '-')} ${date.time.toString().replace(/,/g, ':')}`);
        }}
      />
    </React.Fragment>
  );
}
